<template>
  <div class="view">
    <x-header :left-options="{backText: ''}" class="vux-1px-b">{{$route.query.title}}</x-header>
    <data-sort :data="sortData" :enableSwitch="true" :enableFilter="false" :display="display" @sortChange="sortChange" @switchChange="changeDisplay"></data-sort>
    <div class="content">
      <div class="mescroll" id="taggoods_mescroll">
        <div class="scroll">
          <goods-card v-for="item in data" :key="item.goods_id" :data="item" :type="display"></goods-card>
        </div>
        <div id="taggoods_noData"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import { XHeader } from 'vux'
  import dataSort from '@comps/dataSort'
  import goodsCard from '@comps/card/goodsCard'
  import { getGoodsListForTag } from '@api'
  import MeScroll from 'mescroll.js'
  import { mapState, mapMutations } from 'vuex'
  import qs from 'qs'
  import {SET_LOADING} from '@store/type'

  export default {
    components: {
      XHeader,
      dataSort,
      goodsCard
    },
    computed: {
      ...mapState(['longitude', 'latitude'])
    },
    data () {
      return {
        sortData: [
          {
            type: 1,
            name: '距离',
            status: true,
            isUp: true,
            list: [
              {status: false, sidx: 'other', title: '综合', sord: 'desc'},
              {status: false, sidx: 'create_time', title: '新品', sord: 'desc'},
              {status: true, sidx: 'seller_distance', title: '距离', sord: 'asc'},
              {status: false, sidx: 'goods_evaluationnum', title: '评价', sord: 'desc'}
            ]
          }, {
            type: 2,
            name: '销量',
            status: false,
            isUp: false,
            list: [
              {status: false, sidx: 'goods_salenum', title: '销量从高到低', sord: 'desc'}
            ]
          }, {
            type: 3,
            name: '价格',
            status: false,
            isUp: true,
            list: [
              {status: false, sidx: 'goods_saleprice', title: '价格从低到高', sord: 'asc'},
              {status: false, sidx: 'goods_saleprice', title: '价格从高到低', sord: 'desc'}
            ]
          }
        ],
        data: [],
        postData: {
          tag_id: this.$route.query.id,
          top: 0,
          page: 1,
          rows: 10,
          sord: 'desc',
          sidx: 'seller_distance'
        },
        display: true,
        meScroll: null
      }
    },
    methods: {
      ...mapMutations({
        setLoading: SET_LOADING
      }),
      // 加载店铺商品
      async loadGoods (page) {
        this.setLoading({
          status: true,
          opacity: 0
        })
        this.postData.page = page.num
        this.postData.rows = page.size
        this.postData.longitude = this.longitude || 0
        this.postData.latitude = this.latitude || 0
        let res = await getGoodsListForTag(qs.stringify(this.postData))
        this.setLoading(false)
        if (res && res.code === 200) {
          if (page.num === 1) {
            this.data = []
          }
          this.data = [...this.data, ...res.data.list]
          let hasNext = (this.data.length < res.data.length)
          this.meScroll.endSuccess(res.data.length, hasNext)
        } else {
          this.meScroll.endErr()
        }
      },
      // 初始化滚动区
      initMeScroll () {
        let self = this
        this.$nextTick(() => {
          if (this.meScroll) {
            this.meScroll.resetUpScroll()
          } else {
            this.meScroll = new MeScroll('taggoods_mescroll', {
              up: {
                callback (page) {
                  self.loadGoods(page)
                },
                noMoreSize: 1,
                htmlNodata: '<p class="upwarp-nodata">我是有底线的</p>',
                empty: {
                  warpId: 'taggoods_noData',
                  tip: '没有更多的数据',
                  icon: 'http://img.zanjl.com/Content/img/image/withoutData@2x.png'
                }
              }
            })
          }
        })
      },
      // 排序商品
      sortChange (data) {
        this.postData.sord = data.sord
        this.postData.sidx = data.sidx
        this.postData.page = 1
        this.initMeScroll()
      },
      // 显示方式切换
      changeDisplay () {
        this.display = !this.display
      },
      // 加载位置
      loadLocation () {
        this.postData.longitude = this.longitude || 0
        this.postData.latitude = this.latitude || 0
      }
    },
    created () {
      this.loadLocation()
      this.initMeScroll()
    },
    activated () {
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/pub";
  .content {
    height: calc(100% - #{$default_navbar_height} - #{$default_toolbar_height});
  }
</style>
